<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left: 20px">
      <el-form-item label="统计时间">
        <el-date-picker
          v-model="formInline.time"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="时间间隔精度">
        <avue-select v-model="formInline.timeType" placeholder="请选择时间间隔精度" type="tree" :dic="intervalDic"></avue-select>
      </el-form-item>
      <el-form-item label="统计区域">
        <avue-select v-model="formInline.area" placeholder="请选择统计区域" type="tree" :dic="regionDic"></avue-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div id="myChart" :style="{width: '50%', height: '48vh',display:'inline-block'}"></div>
    <div id="myChart4" :style="{width: '50%', height: '48vh',display:'inline-block'}"></div>
    <div id="myChart2" :style="{width: '60%', height: '39vh',display:'inline-block'}"></div>
    <div id="myChart3" :style="{width: '40%', height: '39vh',display:'inline-block'}"></div>
  </div>
</template>

<script>

  import {historyData,areaDesc,ccll} from '@/api/dataAnalysis'
  import echarts from 'echarts'
    export default {
        name: "index",
        data(){
            return {
                pieData:{},
                shuichang:{},
                intervalDic:[{
                    label:'天',
                    value:1
                },{
                    label:'小时',
                    value:2
                },{
                    label:'分钟',
                    value:3
                },],
                regionDic:[],
                form1:"",
                formInline:{
                    area:"wlq",
                    time:[]
                },
                data:[],
                data2:[],
            }
        },
        created() {
          this.getAreaValue()
        },
        mounted() {
            this.onSubmit()
            this.drawBar();
            this.drawPie()
        },
        methods:{
          async getAreaValue() {
            this.regionDic = [];
            await areaDesc().then((res) => {
              for (let area of res.data) {
                let option = {
                  value: area.key,
                  label: area.name,
                };
                this.regionDic.push(option);
              }
            });
          },

            drawLine(){

                // 基于准备好的dom，初始化echarts实例
                let that = this
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表


                let option = {
                    title: {
                        text: '水厂数据',
                        left: 'center'
                    },
                  tooltip: {
                    trigger: 'axis'
                  },
                    xAxis: {
                        data:this.shuichang.timeArray,
                        type: 'category',
                        boundaryGap: false
                    },
                    yAxis: [{
                        // name: '出厂水量',
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} m³'
                        },
                    },
                    {
                      // name: '用电量',
                      type: 'value',
                      axisLabel: {
                          formatter: '{value} kW·h'
                      },
                    },
                    ],
                    grid: [{
                        left: 70,
                        right: 75,
                    }, ],
                    dataZoom: [
                        {
                            show: true,
                            realtime: true,
                            start: 65,
                            end: 85
                        },
                    ],
                    legend: {
                        data: ['出厂水量','用电量'],
                        left: 50,
                    },
                    series: [
                        {
                            name:"出厂水量",
                            type: 'line',
                            data: this.shuichang.ccllArray
                        },
                        {
                            name:"用电量",
                            type: 'line',
                            data: this.shuichang.ydlArray,
                            yAxisIndex: 1,
                        },
                    ]
                };
                myChart.setOption(option)
            },
            drawLine2(){
                let myChart = this.$echarts.init(document.getElementById('myChart4'))

                let series=[]

                for(let i=0;i<this.shuichang.swArray.length;i++){
                    series.push({
                        name:this.shuichang.swArray[i].name,
                        type: 'line',
                        data: this.shuichang.swArray[i].value,
                    })
                }
                // 绘制图表

                let option = {
                    title: {
                        text: '水位数据',
                        left: 'center'
                    },
                  tooltip: {
                    trigger: 'axis'
                  },
                    xAxis: {
                        data:this.shuichang.timeArray,
                        type: 'category',
                        boundaryGap: false,
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} m'
                        }
                    },
                    grid: [{
                        left: 70,
                        right: 50,
                    }, ],
                    dataZoom: [
                        {
                            show: true,
                            realtime: true,
                            start: 65,
                            end: 85
                        },
                    ],
                    legend: {
                        left: 100,
                        top:30
                    },
                    series: series
                };
              myChart.setOption(option, {
                notMerge: true,
              });
            },
            drawLine3(){

            // 基于准备好的dom，初始化echarts实例
            let that = this
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            let option = {
              title: {
                text: '水厂数据',
                left: 'center'
              },
              tooltip: {
                trigger: 'axis'
              },
              xAxis: {
                data:this.shuichang.timeArray,
                type: 'category',
                boundaryGap: false
              },
              yAxis: {
                type: 'value',
                axisLabel: {
                  formatter: '{value} kW·h'
                },
              },
              grid: [{
                left: 70,
                right: 75,
              }, ],
              legend: {
                data: ['取水泵站用电量','加压泵站用电量'],
                left: 50,
              },
              series: [
                {
                  name:"取水泵站用电量",
                  type: 'line',
                  data: this.shuichang.ccllArray
                },
                {
                  name:"加压泵站用电量",
                  type: 'line',
                  data: this.shuichang.ydlArray,
                },
              ]
            };
            myChart.setOption(option)
          },
            drawBar(){
                let myChart = this.$echarts.init(document.getElementById('myChart2'))
                let colors = ['#5793f3', '#d14a61', '#675bba'];
                let option = {
                    color: colors,
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    grid: {
                        right: '20%'
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    legend: {
                        data: ['蒸发量', '降水量', '平均温度']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '蒸发量',
                            min: 0,
                            max: 250,
                            position: 'right',
                            axisLine: {
                                lineStyle: {
                                    color: colors[0]
                                }
                            },
                            axisLabel: {
                                formatter: '{value} ml'
                            }
                        },
                        {
                            type: 'value',
                            name: '降水量',
                            min: 0,
                            max: 250,
                            position: 'right',
                            offset: 80,
                            axisLine: {
                                lineStyle: {
                                    color: colors[1]
                                }
                            },
                            axisLabel: {
                                formatter: '{value} ml'
                            }
                        },
                        {
                            type: 'value',
                            name: '温度',
                            min: 0,
                            max: 25,
                            position: 'left',
                            axisLine: {
                                lineStyle: {
                                    color: colors[2]
                                }
                            },
                            axisLabel: {
                                formatter: '{value} °C'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '蒸发量',
                            type: 'bar',
                            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                        },
                        {
                            name: '降水量',
                            type: 'bar',
                            yAxisIndex: 1,
                            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                        },
                        {
                            name: '平均温度',
                            type: 'line',
                            yAxisIndex: 2,
                            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                        }
                    ]
                };
                myChart.setOption(option)
            },
            drawPie(){
                let myChart = this.$echarts.init(document.getElementById('myChart3'))

              let dataTemp=[]
              for(let i=0;i<this.pieData.length;i++){
                dataTemp.push({
                  value: this.pieData[i].value,
                  name:this.pieData[i].name,
                })
              }
              let series=[{
                name: '用水量',
                type: 'pie',
                radius: '50%',
                // roseType: 'area',
                data: dataTemp,
                // emphasis: {
                //   itemStyle: {
                //     shadowBlur: 10,
                //     shadowOffsetX: 0,
                //     shadowColor: 'rgba(0, 0, 0, 0.5)'
                //   }
                // }
              }]

                let option = {
                    title: {
                        text: '各水厂出厂水量',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        left: 'center',
                        top: 'bottom',
                        data: ['云谷寺', '天海', '西海', '温泉']
                    },
                    // toolbox: {
                    //     show: true,
                    //     feature: {
                    //         mark: {show: true},
                    //         dataView: {show: true, readOnly: false},
                    //         magicType: {
                    //             show: true,
                    //             type: ['pie', 'funnel']
                    //         },
                    //         restore: {show: true},
                    //         saveAsImage: {show: true}
                    //     }
                    // },
                    series: series
                };
                myChart.setOption(option)
            },

          onSubmit(){
            if(this.formInline.time){
              this.formInline.startTime=this.formInline.time[0]
              this.formInline.endTime=this.formInline.time[1]
            }else{
              this.formInline.startTime=''
              this.formInline.endTime=''
            }

            let obj={
              area:this.formInline.area,
              endTime:this.formInline.endTime,
              startTime:this.formInline.startTime,
              timeType:this.formInline.timeType
            }
            historyData(obj).then(res=>{
              this.shuichang=res.data
              if(this.shuichang.isWlq){
                this.drawLine3()
              }else{
                this.drawLine()
              }
              this.drawLine2()
            })
            ccll(obj).then(res=>{
              this.pieData=res.data
              this.drawPie()
            })
          }
        }
    }
</script>

<style scoped>

</style>
